﻿<form id="queryForm" class="layui-form layui-form-pane" lay-filter="" style="display:none;">
    <div class="layui-form-item">
        <label class="layui-form-label">所在省份</label>
        <div class="layui-input-inline">
            <select id="Province" name="Province" lay-filter="Province" lay-search>
                <option value="0"></option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">所在城市</label>
        <div class="layui-input-inline">
            <select id="City" name="City" lay-filter="City" lay-search>
                <option value="0"></option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">所在区县</label>
        <div class="layui-input-inline">
            <select id="County" name="County" lay-filter="County" lay-search>
                <option value="0"></option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">仓库类型</label>
        <div class="layui-input-inline">
            <select id="StoreTypeID" name="StoreTypeID" lay-filter="StoreTypeID" lay-search>
                <option value="0"></option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">库位长度</label>
        <div class="layui-input-inline" style="width:60px">
            <select name="LengthSize">
                <option value=">=" selected>>=</option>
                <option value="=">=</option>
                <option value="<="><=</option>
            </select>
        </div>
        <div class="layui-input-inline" style="width:120px">
            <input type="text" name="Length" placeholder="米" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">库位宽度</label>
        <div class="layui-input-inline" style="width:60px">
            <select name="WidthSize">
                <option value=">=" selected>>=</option>
                <option value="=">=</option>
                <option value="<="><=</option>
            </select>
        </div>
        <div class="layui-input-inline" style="width:120px">
            <input type="text" name="Width" placeholder="米" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">库位高度</label>
        <div class="layui-input-inline" style="width:60px">
            <select name="HeightSize">
                <option value=">=" selected>>=</option>
                <option value="=">=</option>
                <option value="<="><=</option>
            </select>
        </div>
        <div class="layui-input-inline" style="width:120px">
            <input type="text" name="Height" placeholder="米" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item" style="text-align:center;">
        <button class="layui-btn" lay-submit lay-filter="query">查询</button>
        <button class="layui-btn" id="reset">重置</button>
    </div>
</form>
<table id="table" class="layui-table" lay-filter="table"></table>
<script type="text/html" id="toolbar">
    <div class="layui-btn-container">
        <a class="layui-btn layui-btn-sm" lay-event="query">库位查询</a>
        @Html.LayuiButton("position", "三维定位", "layui-btn layui-btn-sm", "/Resource/Rent/Recommend")
        @Html.LayuiButton("imageShow", "图片查看", "layui-btn layui-btn-sm", "/Resource/Location/ImageShow")
        @Html.LayuiButton("add", "新增租赁", "layui-btn layui-btn-sm", "/Resource/Rent/Add")
    </div>
</script>
<script>
    layui.use(['table', 'layer', 'form'], function () {
        var $ = layui.jquery;
        var table = layui.table;
        var layer = layui.layer;
        var form = layui.form;
        var firstOpen = true;
        //弹窗查询
        layui.ownQuery = function () {
            layer.open({
                type: 1,
                //skin: 'layui-layer-rim',
                title: "租赁查询",
                content: $('#queryForm'),
                success: function () {
                    if (firstOpen) {
                        //省份
                        $.ajax({
                            url: '/Local/Region/List',
                            data: { code: 0 },
                            success: function (res) {
                                if (res.count > 0) {
                                    $(res.data).each(function (index, item) {
                                        $("#Province").append("<option value='" + item.value + "'>" + item.text + "</option>");
                                    });
                                    form.render("select");
                                }
                            }
                        });
                        //仓库类型
                        $.ajax({
                            url: '/Resource/StoreType/SelectList',
                            success: function (res) {
                                if (res.count > 0) {
                                    $(res.data).each(function (index, item) {
                                        $("#StoreTypeID").append("<option value='" + item.value + "'>" + item.text + "</option>");
                                    });
                                    form.render("select");
                                }
                            }
                        });
                    }
                    firstOpen = false;
                }
            });
        }
        layui.ownQuery();
        form.on('select(Province)', function (obj) {
            $("#City").empty();
            $("#City").append("<option value='0'></option>");
            $.ajax({
                url: '/Local/Region/List',
                data: { code: obj.value },
                success: function (res) {
                    if (res.count > 0) {
                        $(res.data).each(function (index, item) {
                            $("#City").append("<option value='" + item.value + "'>" + item.text + "</option>");
                        });
                        form.render("select");
                    }
                }
            });

        });
        form.on('select(City)', function (obj) {
            $("#County").empty();
            $("#County").append("<option value='0'></option>");
            $.ajax({
                url: '/Local/Region/List',
                data: { code: obj.value },
                success: function (res) {
                    if (res.count > 0) {
                        $(res.data).each(function (index, item) {
                            $("#County").append("<option value='" + item.value + "'>" + item.text + "</option>");
                        });
                        form.render("select");
                    }
                }
            });

        });
        //查询
        layui.tableReload = function (data) {
            console.log(data)
            table.reload("table", {
                where: data,
                page: { curr: 1 }
            });
        }
        form.on("submit(query)", function (data) {
            layer.closeAll();
            layui.tableReload(data.field);
            return false;
        })
        // 渲染表格
        table.render({
            id: "table",
            elem: '#table',
            method: "post",
            url: 'Recommend',
            where: {},
            cellMinWidth: 80,
            toolbar: "#toolbar",
            cols: [
                [
                    { type: 'checkbox' },
                    { field: 'Code', title: '库位编号' },
                    { field: 'Area', title: '库位面积' },
                    { field: 'StorehouseCode', title: '所属仓库' },
                    { field: 'TypeName', title: '仓库类型' },
                    { field: 'ParkCode', title: '所属园区' },
                    { field: 'ProvinceName', title: '省份' },
                    { field: 'CityName', title: '城市' },
                    { field: 'CountyName', title: '区县' },
                    { field: 'Length', title: '长度' },
                    { field: 'Width', title: '宽度' },
                    { field: 'Height', title: '高度' },
                    {
                        field: 'IsRented', title: '是否租赁', templet: function (d) {
                            return d.IsRented ? "是" : "否";
                        }
                    },
                    //{ field: 'RentDeptName', title: '租赁单位' },
                    { field: 'CreateDate', title: '创建日期' },
                ]
            ],
            done: function (res, curr, count) { //res 即为原始返回的数据
                //console.log(res);
            },
            page: { limit: 20 }
        });

        //监听头部事件
        table.on('toolbar(table)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id)
                , data = checkStatus.data; //获取选中的数据
            if (obj.event != "query") {
                if (data.length === 0) {
                    layer.msg('请选择一行');
                    return;
                } else if (data.length > 1) {
                    layer.msg('只能同时操作一个');
                    return;
                }
            }
            switch (obj.event) {
                case 'add':
                    layer.open({
                        type: 2,
                        title: '新增租赁',
                        maxmin: true,
                        area: ['350px', '400px'],
                        content: 'Add?id=' + data[0].ID,
                        end: function () {
                            layui.tableReload();
                        }
                    });
                    break;
                case 'position':
                    layer.open({
                        type: 2,
                        title: '三维定位',
                        maxmin: false,
                        area: ['100%', '100%'],
                        content: '/Resource/Show3D/ShowPosition?ParkID=' + data[0].ParkID + "&Code=" + data[0].Code
                    });
                    break;
                case 'imageShow':
                    $.ajax({
                        url: '/Resource/Location/ImageShow',
                        data: { id: data[0].ID },
                        success: function (res) {
                            if (res.count > 0) {
                                layer.photos({
                                    photos: res.data
                                    , anim: 5
                                });
                            }
                            else {
                                layer.msg(res.msg);
                            }
                        }
                    });
                    break;
                case 'query':
                    layui.ownQuery();
                    break;
            };
        });
        $("#reset").click(function () {
            form.val('', {
                Province: "0",
                City: "0",
                County: "0",
                StoreTypeID: "0",
                LengthSize: ">=",
                WidthSize: ">=",
                HeightSize: ">=",
                Length: "",
                Width: "",
                Height: "",
            });
            return false;
        })
    });
</script>
